<template>
<n-card :hoverable="true" :embedded="true">
    <div v-show="conn.isConnected">
        <div class="row gap10" style="margin-bottom:3px; color:#888">
            <div style="width:70px">主机零件</div>
            <div>{{mapPartNames[conn.meta.PART_ID]||'--'}} (VER:{{conn.meta.PART_VERSION||'--'}})</div>
        </div>
        <div class="row gap10" style="margin-bottom:5px; color:#888">
            <div style="width:70px">固件</div>
            <div>{{conn.meta.BeShell? ("BeShell "+conn.meta.BeShell): 'unknown'}}</div>
        </div>

        <div class="row gap10">
            <div style="width:70px">
                <n-statistic label="CPU0" :value="usage.cpu0">
                    <template #suffix>%</template>
                </n-statistic>
            </div>
            <MonitorChart ref="refChartCpu0" color="#00b8ff"></MonitorChart>
        </div>

        <div class="row gap10">
            <div style="width:70px">
                <n-statistic label="CPU1" :value="usage.cpu1">
                    <template #suffix>%</template>
                </n-statistic>
            </div>
            <MonitorChart ref="refChartCpu1" color="#00b8ff"></MonitorChart>
        </div>

        <div class="row gap10">
            <div style="width:70px">
                <n-statistic label="运行内存" :value="usage.mem">
                    <template #suffix>%</template>
                </n-statistic>
            </div>
            <MonitorChart ref="refChartMem" color="green"></MonitorChart>
        </div>

        <div style="margin-top:5px">
            文件系统
        </div>
        <div class="row gap15" style="justify-content: space-between;">
            
            <n-tooltip trigger="hover">
                <template #trigger>
                    <n-progress
                        style="margin: 0 8px 12px 0"
                        type="circle"
                        :percentage="usage.root"
                        indicator-placement="inside"
                    >
                        <div>
                            <div style="text-align: center">/</div>
                            <div style="text-align: center">{{usage.root}}%</div>
                        </div>
                    </n-progress>
                </template>
                <div>分区：/</div>
                <div>容量：{{vol.root.total}} KB</div>
                <div>已用：{{vol.root.used}} KB</div>
            </n-tooltip>


            <n-tooltip trigger="hover">
                <template #trigger>
                    <n-progress
                        style="margin: 0 8px 12px 0"
                        type="circle"
                        :percentage="usage.home"
                        indicator-placement="inside"
                        :color="themeVars.successColor"
                        :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
                        :indicator-text-color="themeVars.successColor"
                    >
                        <div>
                            <div style="text-align: center">/home</div>
                            <div style="text-align: center">{{usage.home}}%</div>
                        </div>
                    </n-progress>
                </template>
                <div>分区：/home</div>
                <div>容量：{{vol.home.total}} KB</div>
                <div>已用：{{vol.home.used}} KB</div>
            </n-tooltip>
        </div>
    </div>

    <div v-show="!conn.isConnected" style="width: 100%; height: 300px; top: 0px; left: 0px; text-align: center;">
        <div style="margin-top:50px">
            <svg viewBox="0 0 1109 1024" width="48" height="48"><path d="M170.666667 738.133333c-42.666667-72.533333-64-145.066667-64-221.866666 0-59.733333 12.8-115.2 34.133333-174.933334 8.533333-12.8 17.066667-29.866667 25.6-42.666666L115.2 247.466667c-12.8 21.333333-25.6 46.933333-34.133333 72.533333-25.6 59.733333-38.4 128-38.4 196.266667 0 93.866667 21.333333 179.2 68.266666 256 46.933333 76.8 102.4 132.266667 170.666667 166.4l34.133333-55.466667C260.266667 849.066667 213.333333 802.133333 170.666667 738.133333z m183.466666-102.4c-12.8-17.066667-17.066667-38.4-25.6-55.466666-4.266667-17.066667-8.533333-38.4-8.533333-59.733334 0-21.333333 4.266667-42.666667 8.533333-59.733333L273.066667 405.333333c-12.8 34.133333-17.066667 68.266667-17.066667 110.933334 0 59.733333 12.8 106.666667 42.666667 145.066666v4.266667l38.4 51.2c17.066667 17.066667 34.133333 34.133333 51.2 46.933333l34.133333-55.466666c-25.6-21.333333-51.2-46.933333-68.266667-72.533334z m580.266667 221.866667c25.6-25.6 46.933333-55.466667 64-85.333333 46.933333-76.8 68.266667-162.133333 68.266667-256 0-68.266667-12.8-136.533333-38.4-196.266667-25.6-59.733333-59.733333-115.2-110.933334-162.133333-46.933333-46.933333-102.4-85.333333-166.4-110.933334-64-25.6-128-38.4-200.533333-38.4S418.133333 17.066667 354.133333 42.666667C302.933333 68.266667 256 98.133333 213.333333 136.533333L115.2 38.4c-17.066667-17.066667-42.666667-17.066667-59.733333 0s-17.066667 42.666667 0 59.733333l896 896c17.066667 17.066667 42.666667 17.066667 59.733333 0s17.066667-42.666667 0-59.733333l-76.8-76.8zM384 106.666667c55.466667-21.333333 115.2-34.133333 170.666667-34.133334s115.2 12.8 170.666666 34.133334c51.2 21.333333 98.133333 51.2 140.8 93.866666h4.266667c42.666667 42.666667 72.533333 89.6 93.866667 140.8 21.333333 55.466667 34.133333 115.2 34.133333 174.933334 0 81.066667-21.333333 153.6-64 221.866666-17.066667 25.6-34.133333 51.2-55.466667 72.533334l-102.4-102.4c12.8-12.8 21.333333-25.6 29.866667-42.666667l4.266667-4.266667c25.6-42.666667 38.4-89.6 38.4-145.066666 0-85.333333-29.866667-153.6-85.333334-209.066667-59.733333-59.733333-132.266667-89.6-213.333333-89.6-72.533333 0-136.533333 25.6-192 72.533333L260.266667 183.466667C298.666667 153.6 337.066667 123.733333 384 106.666667zM631.466667 554.666667c8.533333-12.8 8.533333-25.6 8.533333-38.4 0-25.6-8.533333-46.933333-25.6-59.733334-17.066667-21.333333-38.4-29.866667-59.733333-29.866666-12.8 0-25.6 4.266667-38.4 12.8L413.866667 337.066667c38.4-29.866667 85.333333-46.933333 140.8-46.933334 68.266667 0 119.466667 21.333333 162.133333 68.266667 46.933333 42.666667 68.266667 93.866667 68.266667 162.133333 0 42.666667-8.533333 81.066667-29.866667 115.2v4.266667h-4.266667c-4.266667 8.533333-8.533333 17.066667-17.066666 21.333333L631.466667 554.666667z" fill="#bfbfbf" p-id="10214"></path></svg>
        </div>
        <div style="margin-top:20px">尚未连接到主机零件</div>
    </div>

</n-card>
</template>

<style scoped>
</style>

<script lang="ts" setup>
import { ref, onMounted, Ref, reactive, computed } from 'vue'
import {conn} from "@beshell/conn-ts/Connection"
import MonitorChart from './MonitorChart.vue'
import { useThemeVars } from 'naive-ui'
import { changeColor } from 'seemly'

const themeVars = useThemeVars()
let watching = true

const mapPartNames = {
    1: "BeCore16" ,
    2: "BeCore32" ,
    3: "BePad" ,
    19: "BeVison" ,
}

const refChartCpu0 = ref(null) as unknown as Ref<typeof MonitorChart>
const refChartCpu1 = ref(null) as unknown as Ref<typeof MonitorChart>
const refChartMem = ref(null) as unknown as Ref<typeof MonitorChart>

const usage = reactive({
    cpu0: 0 ,
    cpu1: 0 ,
    mem: 0 ,
    root: 0,
    home: 0,
})

const vol = reactive({
    root: {
        total: 0, used: 0
    } ,
    home: {
        total: 0, used: 0
    } ,
})

let times = 0
onMounted(()=>{

    setInterval(async ()=>{
        if(!conn.isConnected || !watching) {
            return
        }
        let fsUsage = (times++)==0
        if(times>5) {
            times = 0
        }

        let res = await conn.console.call(`beconsoled.usage(${fsUsage})`)
        usage.cpu0 = res.cpu0<=100? res.cpu0: 100
        usage.cpu1 = res.cpu1<=100? res.cpu1: 100
        usage.mem = res.mem
        refChartCpu0.value.push( usage.cpu0 )
        refChartCpu1.value.push( usage.cpu1 )
        refChartMem.value.push( usage.mem )

        if(fsUsage) {
            usage.root = Math.round(res.root.used*100 / res.root.total)
            usage.home = Math.round(res.home.used*100 / res.home.total)

            vol.root.total = Math.round(res.root.total/1024)
            vol.root.used = Math.round(res.root.used/1024)
            
            vol.home.total = Math.round(res.home.total/1024)
            vol.home.used = Math.round(res.home.used/1024)
        }

    }, 1000)

})

function watch() {
    watching = true
}
function unwatch() {
    watching = false
}

defineExpose({watch,unwatch})

</script>